<template>
	<view class="ikz-apply">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<image class="ikz-top-bg" :src="img.apply_receive_background" mode="widthFix"></image>
		<view class="ikz-apply-form-box">

			<view class="ikz-apply-form">
				<!-- 24.06.13 隐藏公众号图片  -->
				<!-- <view class="ikz-apply-public">
					<image class="ikz-apply-public-img" @click="showImg(img.public_img,img.url)" mode="aspectFit"
						:src="img.public_img">
					</image>  
					<official-account></official-account>
				</view> -->
				<view class="ikz-apply-item">
					<view class="ikz-apply-title">
						<text style="color: red;">*</text>姓名
					</view>
					<input class="ikz-apply-input" v-model="form_data.name" placeholder="请输入姓名" />
				</view>
				<view class="ikz-apply-item" v-if="pageShow">
					<view class="ikz-apply-title">
						<text style="color: red;">*</text>身份证号
					</view>
					<input class="ikz-apply-input" v-model="form_data.student_no" placeholder="请输入身份证号" />
				</view>
				<view class="ikz-apply-item" v-else>
					<view class="ikz-apply-title">
						<text style="color: red;">*</text>手机号
					</view>
					<input class="ikz-apply-input" v-model="form_data.student_no" placeholder="请输入手机号" />
				</view>
				<view class="ikz-apply-updata-item" v-if="pageShow">
					<view class="ikz-apply-title" style="width: 100%;">
						<text style="color: red;">*</text>身份证正面
					</view>
					<view class="ikz-updata-box">
						<image v-if="positiveImage && !files[0]" class="ikz-updata-add" @click="addPic(2)" mode="widthFix"
							:src="positiveImage"></image>	
						<image v-else-if="files[0]" class="ikz-updata-add" @click="addPic(2)" mode="widthFix"
							:src="files[0]"></image>
						<image v-else class="ikz-updata-add" @click="addPic(2)" mode="widthFix"
							src="/static/receiver/updata.png">
						</image>
					</view>
				</view>
				<view class="ikz-apply-updata-item">
					<view class="ikz-apply-title" style="width: 100%;">
						<text style="color: red;">*</text>微信收款码
					</view>
					<view class="ikz-updata-box">
						<image v-if="codeImage && !files[1]" class="ikz-updata-add" @click="addPic(3)" mode="widthFix"
							:src="codeImage"></image>
						<image v-else-if="files[1]" class="ikz-updata-add" @click="addPic(3)" mode="widthFix"
							:src="files[1]"></image>
						<image v-else class="ikz-updata-add" @click="addPic(3)" mode="widthFix"
							src="/static/receiver/updata.png">
						</image> 
					</view>
				</view>
				<view class="ikz-apply-updata-item">
					<view class="ikz-apply-title" style="width: 100%;">
						<text style="color: red;">*</text>支付宝收款码
					</view>
					<view class="ikz-updata-box">
						<image v-if="alipayImage && !files[2]" class="ikz-updata-add" @click="addPic(4)" mode="widthFix"
							:src="alipayImage"></image>	
						<image v-else-if="files[2]" class="ikz-updata-add" @click="addPic(4)" mode="widthFix"
							:src="files[2]"></image>
						<image v-else class="ikz-updata-add" @click="addPic(4)" mode="widthFix"
							src="/static/receiver/updata.png">
						</image> 
					</view>
					<view style="font-size: 26rpx;color: red;">二维码为收益提现二维码，务必上传本人二维码，</view>
					<view style="font-size: 26rpx;color: red;">如果因二维码错误造成收益损失，平台概不负责！</view>
				</view>
				<view class="ikz-apply-checkbox">
					<checkbox-group @change="checkStatus">
						<label>
							<checkbox value="cb" />
						</label>
					</checkbox-group>
					同意并阅读<text style="color: #FBAB78;" @click="agreementDetail">《接单员协议》</text>
				</view>
				<view class="ikz-updata-btn" @click="toMessage">
					申请接单员
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	var app = getApp();
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading
		},
		data() {
			return {
				form_data: {
					name: '',
					student_no: '',
					student_positive_image: '',
					// code_image: '', 
				},
				files: [],
				loading_css: {
					display: 'flex',
				},
				img: {},
				check_status: '',
				pageShow: false,
				template_id:{},
				adminImgPath: app.globalData.adminImgPath,
				positiveImage:'',
				codeImage:'',
				alipayImage:''
			}
		},
		onLoad() {
			this.templateId()
			this.templatDetails()
			this.imgInfo((res) => {
				this.loading_css.display = 'none';
			})
		},
		methods: {
			//获取申请详情
			templatDetails(){
			  var path = '/xyb/user_receive_apply/details';
			  var data = {
			    token: uni.getStorageSync('local_user_session'),
			    agent_id: uni.getStorageSync('default_agent').id||''
			  }
			  ikz.post(path,data,(res)=>{
			    if(res.data.code){
					if(res.data.data != null){
						this.form_data = res.data.data
						this.positiveImage = this.adminImgPath + res.data.data.student_positive_image
						this.codeImage = this.adminImgPath + res.data.data.code_image
						this.alipayImage = this.adminImgPath + res.data.data.alipay_code_image
						this.form_data.student_positive_image = res.data.data.student_positive_image
						this.form_data.code_image = res.data.data.code_image
						this.form_data.alipay_code_image = res.data.data.alipay_code_image
					}
			    }else{
			      uni.showModal({
			        title: '提示',
			        content: res.data.msg,
			        showCancel: false,
			        success: function(res) {}
			      });
			    }
			  })
			},
			//获取模板参数
			templateId(){
			  var path = '/xyb/wechat_mini_push/template_id_list';
			  var data = {
			    
			  }
			  ikz.post(path,data,(res)=>{
			    if(res.data.code){
			      this.template_id = res.data.data;
			    }else{
			      uni.showModal({
			        title: '提示',
			        content: res.data.msg,
			        showCancel: false,
			        success: function(res) {}
			      });
			    }
			  })
			},
			agreementDetail() {
				uni.navigateTo({
					url: '../../agreement/index'
				})
			},
			checkStatus(e) {
				this.check_status = e.detail.value[0] || '';
			},
			imgInfo(fn) {
				var path = '/xyb/same/receive_apply_img';	
				var data = this.form_data;
				ikz.post(path, data, res => {
					if (res.data.code) {  
						this.img = res.data.data
						this.payMethod = this.img.withdrawal_pay_method
						if(res.data.data.apply_receive_image_show==1) {
							this.pageShow = true
						} else {
							this.pageShow = false
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					fn();
				});
			},
			//选择图片
			addPic(status) {

				var that = this;
				wx.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						if (status == 2) {
							that.files[0] = res.tempFilePaths[0];
						} else if (status == 3) {
							that.files[1] = res.tempFilePaths[0];
						} else {
							that.files[2] = res.tempFilePaths[0];
						}
						that.$forceUpdate();
						that.$emit('returnFiles', that.files)
					}
				})
			},
			// 订阅消息 
			toMessage(){
				var temp_id = [
				  this.template_id.audit_result_notification,
				]
				//订阅消息 
				var that = this;
				uni.requestSubscribeMessage({
				  tmplIds: temp_id,
				  success(res) {
				      that.submitUp();
				  },
				  fail(res) {
				    that.up_status == 2;
				    if(res.errCode == 20004){
				      uni.showModal({
				        title: '提示',
				        content: '请前往设置打开接受通知',
				        confirmText: '确定',
				        success(res) {
							that.submitUp();
						}
				      })
					
				    }else{
				      uni.showModal({
				        title: '提示',
				        content: '未订阅消息，无法接收到订单通知',
				        confirmText: '确定',
				        success(res) {
							 that.submitUp();
						}
				      })
					 
				    }
				    
				  }
				})
			},
			//请求页面数据 
			submitUp() {
				// if(!this.pageShow) {
				// 	uni.showModal({
				// 		title: "提示",
				// 		showCancel: false,
				// 		content: "系统正在升级中，请稍后再试"
				// 	})
				// 	return
				// } 
				if (this.check_status == '') {
					wx.showToast({
						title: '请输同意并阅读协议',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.form_data.name == '') {
					wx.showToast({
						title: '请输入姓名',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (this.form_data.student_no == '') {
					wx.showToast({
						title: '请输入身份证号',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (!this.positiveImage && this.pageShow && !this.files[0]) {
					wx.showToast({
						title: '身份证正面未选',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (!this.codeImage && !this.files[1]) {
					wx.showToast({
						title: '请选微信择收款码',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (!this.alipayImage && !this.files[2]) {
					wx.showToast({
						title: '请选择支付宝收款码',
						icon: 'error',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					name: '加载中',
					mask: true
				})
				if (this.pageShow && this.files[0]) {
					this.upImg(0);
				}else{
					this.upData()
				}
			},
			//上传图片
			upImg(index) {
				console.log("this.files的值",this.files);
				var that = this;
				var path = "/common/upload";
				var data = {}
				ikz.up(path, data, 'file', this.files[index], (res) => {
					var temp_result_data = JSON.parse(res.data);
					if (temp_result_data.code) {
						if (index == 0) {
							that.form_data.student_positive_image = temp_result_data.data.url;
						} else if (index == 1) {
							that.form_data.code_image = temp_result_data.data.url;
						} else {
							that.form_data.alipay_code_image = temp_result_data.data.url;
						}
						if (that.files.length == (index + 1)) {
							that.upData();
						} else {
							index++
							that.upImg(index)
						} 
					} else {
						uni.showModal({
							title: '提示',
							content: temp_result_data.msg,
							showCancel: false,
							success: function(res) {}
						});
						uni.hideLoading();
					}
				})
			},
			upData() {
				var path = '/xyb/user_receive_apply/submit_receive';
				var data = this.form_data;
				ikz.post(path, data, res => {
					if (res.data.code) {
						app.globalData.user_openinfo.run_apply_status = 0;
						uni.showToast({
							title: '申请成功',
							mask: true,
							duration: 2000
						});
						setTimeout(function() {
							uni.redirectTo({
								url: '../success/index'
							});
						}, 2000)
					} else {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function(res) {}
						});
					}
					uni.hideLoading();
					// if(that.pull_status){
					// 	this.$emit("change",'pull');
					// }
				});
			},
			showImg(url, path) {
				var path_temp = path || {}
				if (path_temp.path) {
					ikz.getNav(path);
				} else {
					var arr = [];
					arr.push(url)
					uni.previewImage({
						urls: arr,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});

				}

			},

			//跳转至招聘中心
			getRecriut() {
				let url = '/pages/Component/Module/Demand/Program/Recruit/index';
				ikz.nav(url, 'n');
			},

		}
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F3F3F3;
		position: relative;
	}

	.ikz-top-bg {
		width: 100%;
		z-index: -1;
	}

	.ikz-apply-form-box {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.ikz-apply-form {
		box-sizing: border-box;
		padding: 30rpx 15rpx;
		width: 95%;
		margin: 66% auto 40rpx;
		background: #fff;
		border-radius: 15rpx;
		z-index: 99;
	}

	.ikz-apply-item {
		display: flex;
		align-items: center;
		padding: 20rpx 15rpx;
	}

	.ikz-apply-title {
		width: 200rpx;
	}

	.ikz-updata-box {
		display: flex;
		align-items: center;
	}

	.ikz-apply-updata-item {
		padding: 20rpx 15rpx;
	}

	.ikz-updata-add {
		width: 300rpx;
		height: 200rpx;
		margin: 20rpx;
	}

	.ikz-updata-btn {
		position: relative;
		width: 80%;
		margin: 0 auto;
		background: #FBAC7A;
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		line-height: 70rpx;
	}

	.ikz-apply-public {
		height: 270rpx;
	}

	.ikz-apply-public-img {
		width: 100%;
		height: 270rpx;
	}

	.ikz-apply-checkbox {
		display: flex;
		align-items: center;
		font-size: 25rpx;
	}

	checkbox {
		transform: scale(0.6, 0.6);
	}

	.ikz-apply-checkbox {
		margin-bottom: 15rpx;
	}
</style>
